<template>
  <div class="mytuig">
    <!--按钮、搜索-->
    <p class="opr">
      <el-input
              placeholder="搜索"
              v-model="query" size="mini" class="left searchIpt" @keyup.enter.native="getChannelsmyPage(true)">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getChannelsmyPage(true)"></i>
      </el-input>
      <el-select v-model="status" placeholder="推广状态" size="mini" @change='getChannelsmyPage(true)'>
        <el-option label="推广状态" value=""></el-option>
        <el-option label="待推广" value="1"></el-option>
        <el-option label="推广中" value="2"></el-option>

        <el-option label="已完成" value="3"></el-option>
        <el-option label="已取消" value="6"></el-option>
        <el-option label="未完成" value="7"></el-option>

        <el-option label="未推广" value="4"></el-option>
        <el-option label="已过期" value="5"></el-option>
      </el-select>
        <el-select v-model="dicId" placeholder="计费方式" size="mini" @change='getChannelsmyPage(true)'>
        <el-option label="计费方式" value=""></el-option>
        <el-option label="一口价" value="3"></el-option>
        <el-option label="预定流量" value="2"></el-option>
        <el-option label="单次点击" value="1"></el-option>
      </el-select>
    </p>
    <!-- 操作区-->
 <!--    <p class="opr flexOpr">
      <span class="count">需求数（{{inde}}）</span>
    </p> -->
    <!--表格-->
    <el-table
            :data="tableData"
            :empty-text="empty"
            style="width: 100%">
      <el-table-column
              width = "240"
              label="需求">
        <template slot-scope="scope">
          <p class="price">{{ scope.row.demandName }}</p>
          <!-- <p class="price">{{scope.row.content}}</p> -->
        </template>
      </el-table-column>
      <el-table-column
              prop="adminUserName"
              label="发布商">
      </el-table-column>
      <el-table-column
              label="价格(元)">
        <template slot-scope="scope">
          <p v-if="scope.row.demandChargeWay==1">{{ scope.row.demandBudget / scope.row.demandNum | money }}</p>
          <p v-if="scope.row.demandChargeWay==2">{{ scope.row.demandBudget / scope.row.demandNum | money }}</p>
          <p v-if="scope.row.demandChargeWay==3">{{ scope.row.demandPrice | money }}</p>
        </template>
      </el-table-column>
      <el-table-column
              label="计费方式">
              <template slot-scope="scope">
          <p v-if="scope.row.demandChargeWay==1">单次流量</p>
          <p v-if="scope.row.demandChargeWay==2">预定流量</p>
          <p v-if="scope.row.demandChargeWay==3">一口价</p>
        </template>
      </el-table-column>
      <el-table-column
              label="推广流量">
              <template slot-scope="scope">
                  <p>{{scope.row.pv}}/{{scope.row.demandPv}}</p>
              </template>
      </el-table-column>
      <el-table-column
              label="收入">
              <template slot-scope="scope">
                  <p v-if="scope.row.demandChargeWay==1">{{scope.row.budget / scope.row.num | money}}</p>
                  <p v-if="scope.row.demandChargeWay==2">
                     <span v-if="scope.row.demandTotalPv==scope.row.pv">{{scope.row.budget / scope.row.num | money}}</span>
                     <span v-if="scope.row.demandTotalPv!=scope.row.pv">0</span>
                  </p>
                  <p v-if="scope.row.demandChargeWay==3">
                       <span v-if="scope.row.demandTotalPv==scope.row.pv">{{scope.row.demandPrice * scope.row.pv | money}}</span>
                       <span v-if="scope.row.demandTotalPv!=scope.row.pv">0</span>
                  </p>
              </template>
      </el-table-column>
       <el-table-column
              label="需求类型">
               <template slot-scope="scope">
                 <div v-if="scope.row.demandStrategy==1">公开推广</div>
                 <div v-if="scope.row.demandStrategy==3">指定推广</div>
        </template> 
      </el-table-column>
      <el-table-column
              label="推广状态">
         <template slot-scope="scope">
                 <div class="rownamer1" v-if="scope.row.status==1">待推广</div>
                 <div class="rownamer2" v-if="scope.row.status==2">推广中</div>

                 <div class="rownamer3" v-if="scope.row.status==3 && (scope.row.pv<scope.row.demandPv)">未完成</div>
                 <div class="rownamer3" v-if="scope.row.status==3&&(scope.row.pv>=scope.row.demandPv)">已完成</div>
                 <div class="rownamer3" v-if="scope.row.status==4">未推广</div>
                 <div class="rownamer3" v-if="scope.row.status==5">已过期</div>
                 <div class="rownamer3" v-if="scope.row.status==6">已取消</div>
                 <div class="rownamer3" v-if="scope.row.status==7">已取消</div>
        </template>  
      </el-table-column>
      <el-table-column
              width = "140"
              label="推广周期">
        <template slot-scope="scope">
            <p>{{scope.row.demandStartTime | stampFormate2}}-{{scope.row.demandEndTime | stampFormate2}}</p>
        </template>
      </el-table-column>
      <el-table-column
              label="操作">
        <template slot-scope="scope">
            <el-button type="text" size="small" v-if="scope.row.status!=4 && scope.row.status!=1"  @click="dialogshowFront(scope.row.channelDemandId)">查看</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==4 || scope.row.status==1" @click="dialogshowFront(scope.row.channelDemandId)">推广</el-button>
        </template>
      </el-table-column>
    
    </el-table>
    <!--分页-->
    <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           :current-page.sync="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div>
       <!--内容弹框-->
    <el-dialog
            :title="dialog.title"
            :modal="false"
            :visible.sync="centerDialogVisible">
      <!--详情-->
      <div class="el-dialog-tab">
        <div class="xm-item">
          <div class="left">
              <p class="p tit"><span class="line"></span>推广需求</p>
              <p class="p subTit">{{data.name}}</p>
              <p class="p des">推广目标 : {{data.pv}}</p>
              <p class="p des" v-if="data.chargeWay==3">推广金额 : {{data.price | money}}</p>
              <p class="p des" v-if="data.chargeWay!=3">推广金额 : {{data.price * data.pv | money}}</p>
              <p class="p des">推广时间 : {{data.startTime | stampFormate2}}——{{data.endTime | stampFormate2}}</p>
              <p class="p des">推广原文 : {{data.articleTitle}}</p>
          <!--     <p class="p info">
                  <span v-if="channelDetail.demandStrategy == 1">公开 • </span>
                  <span v-if="channelDetail.demandStrategy == 2">内部 • </span>
                  <span v-if="channelDetail.demandStrategy == 3">固定 • </span>
                  <span>{{channelDetail.platform}} • </span>
                  <span>手机号：{{channelDetail.phone}}</span>
              </p> -->
              <el-button type="warning" plain v-if="data.status==4 || (data.counts < data.num && data.status!=3 && data.channelId==null)" @click="postChannels">创建推广</el-button>

              <el-button type="warning" plain disabled v-if="data.counts >= data.num && data.status!=3 && data.status!=4 && data.status!=5 && data.channelId==null">已完成</el-button >
              <el-button  class="buttonboxr1" v-if="data.status==3 && data.channelId==null">已结束</el-button >
              <el-button type="warning" plain disabled v-if="data.status==5">已过期</el-button >
          </div>
        </div>
          <div class="xm-item" v-if="data.status!=4 && data.channelId!=null && data.status!=5">
              <div class="left">
                  <p class="p tit"><span class="line"></span>推广信息</p>
                  <div class="v_progress" v-if="list.demandChargeWay!=3">
                    <el-progress :text-inside="true" :stroke-width="10" :percentage="tim"></el-progress>
                    <!-- <p class="p des v_des">推广金额 : {{data.price | money}}</p> -->
                    <div class="pacerow v_des" v-if="list.demandChargeWay==2">
                     <p class="pacerowt">已有{{list.pv}}阅读，达到{{list.demandPv}}阅读，可获得<span>{{list.demandPrice | money}}</span>元</p>
                   <!--   <p class="pacerowb" v-if="list.demandUpdateTime!=null">{{list.demandUpdateTime | stampFormate2}}</p>
                     <p class="pacerowb" v-if="list.demandUpdateTime==null">{{list.demandCreateTime | stampFormate2}}</p> -->
                    </div>
                   <div class="pacerow v_des" v-if="list.demandChargeWay==1">
                      <p class="pacerowt">已有{{list.pv}}阅读，已获得
                      <span v-if="list.demandPv > list.pv">{{list.demandPrice * list.pv | money}}</span>
                      <span  v-if="list.demandPv <= list.pv">{{list.demandPrice * list.demandPv | money}}</span>
                        元,最多获得<span>{{list.demandPrice * list.demandPv | money}}</span>元</p>
                      <!--  <p class="pacerowb" v-if="list.demandUpdateTime!=null">{{list.demandUpdateTime | stampFormate2}}</p>
                      <p class="pacerowb" v-if="list.demandUpdateTime==null">{{list.demandCreateTime | stampFormate2}}</p> -->
                  </div>
                    <!-- <p class="p des">推广金额 : {{data.price | money}}</p> -->
                  </div>
             <!--      <div class="blueZone">
                      <span v-if="channelDetail.demandChargeWay == 2">预定流量</span>
                      <span v-if="channelDetail.demandChargeWay == 1">单次流量</span>
                      <span v-if="channelDetail.demandChargeWay == 3">一口价</span>
                      {{channelDetail.pv}}/{{channelDetail.demandTotalPv}}，
                      {{channelDetail.demandPrice | getFormatOfMoney }} 元/阅读，
                      预计支出金额<span v-if="channelDetail.channelAmount!=null">{{channelDetail.channelAmount | getFormatOfMoney }}</span><span v-if="channelDetail.channelAmount==null">0</span>
                      <span v-if="channelDetail.actualAmount !=0 ">
                         ，已支出{{channelDetail.actualAmount | getFormatOfMoney }}
                      </span>

                  </div> -->
                  <div class="qrCodeZone">
                      <canvas id="canvas" class="canvas"></canvas>
                      <div class="canvas-right">
                          <p>推广状态:
                              <span v-if="list.status==2">推广中</span>
                              <span v-if="list.status==3">已结束</span>
                              <span v-if="list.status==5">已过期</span>
                              <span v-if="list.status==6">已结束</span>
                              <span v-if="list.status==7">已结束</span>
                          </p>
                          <p>推广时间:{{ list.demandStartTime | stampFormate2}} ~ {{ list.demandEndTime | stampFormate2}}</p>
                          <p>推广文章标题:{{list.articleName}}</p>
                          <p>推广链接文章链接: <el-input v-model="copytext" class="botIpt" size="mini" id="botIpt"></el-input><el-button type="text" @click="copyUrl">复制链接</el-button></p>
                          <p class="p info">
                              <span>阅读数{{list.pv}} • </span>
                              <span>点赞数{{list.articleThumbNum}} • </span>
                              <span>用户数{{list.uv}} • </span>
                              <span>创建时间:{{list.createTime | stampFormate2}}</span>
                          </p>
                      </div>
                  </div>
                  <el-button size="mini" type="warning" plain @click="downloadImg">下载二维码</el-button>
              </div>
          </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
    import {commonService} from '../../service/commonService'
    import {common} from '../../assets/js/common/common'
    var QRCode = require('qrcode')
    var canvas = ''

  export default {
    props: [],
    data () {
      return {
        // 操作区
        status: '', // 选择需求状态
        query: '', // 查询条件
        dicId: '', //行业状态
        // 列表
        tableData: [], //列表数据
        empty:'加载中...',
        // 分页
        currentPage:1,
        inde:1,
        pages:{
           no:1,
           size:10,
        },
        // 弹层
        channelDetail:'',
        dialog: {
          title: '推广', // 弹层标题
          typ: 6, // 弹框类型1.用户；2.设置；3.删除
        },
        centerDialogVisible: false, // 弹框
          
        data:'',  //推广需求详情  
        marketid:'',//推广详情id
        list:'',  //推广详情
        copytext:'',//推广路径
        tim:0,
      }
    },
     computed: {
            //将存在store中的数据取出
            picHead() {
                return this.$store.state.picHead
            },
            articlesurl() {
                return this.$store.state.articlesurl
            },
        },
    // components: {pagination},
    mounted () {
      // let that = this;
      // that.getList();
      this.getChannelsmyPage()
    },
    methods: {
      //分页
      handleSizeChange(val){
          this.pages.size=val
          this.getChannelsmyPage()
      },
      handleCurrentChange(val){
          this.pages.no=val
          this.getChannelsmyPage()
      },
      //获得列表
      getChannelsmyPage (type){
        let that = this;
         if(type==true){
           that.currentPage=1
           that.pages.no=1
         }
        commonService.getChannelsmyPage({pageNo: that.pages.no, pageSize:that.pages.size,query:that.query,type:that.status,chargeWay:that.dicId}).then(function (res) {
                  if(res.data.code==200){
                          that.tableData=res.data.datas.records
                          for(let i=0;i<that.tableData.length;i++){
                           that.tableData[i].pv = Number(that.tableData[i].pv)
                          }
                          console.log(that.tableData)
                          that.inde=res.data.datas.total
                          that.empty="暂无数据"
                  }
        });
      },
      // 详情弹出层
      dialogshowFront:function(id){

            // this.marketid=id
            // this.dialogshow()
            this.$router.push({path:"/promotiondetails",query:{id:id}})
      },
      // 
       getQRCode (url) {
        let that = this;
        let ele = document.getElementById('canvas');
          QRCode.toCanvas(ele, url, (error) => {
              if (error) {
              } else {
              }
          });
      },
      // 推广需求详情弹出层
      dialogshow:function(){
        let that=this;  
      commonService.getChannelDemandid(that.marketid).then(function(res){
                    if(res.data.code == 200){
                        that.data=res.data.datas
                         that.data.counts=Number(that.data.counts)
                        // that.ettime = that.data.endTime - that.data.startTime
                        if(that.data.status!=4 && that.data.channelId !=null && that.data.status!=5){
                           //获取推广详情
                            that.getChannelsId()
                        }
                        that.centerDialogVisible=true  

                        // that.countdown=common.getTimer(that.data.endTime) 
                    }
              })

           
      },
      // 创建推广
      postChannels:function(){
              let that=this
              commonService.postChannels({channelDemandId:that.data.id,articleId:that.data.articleId,projectId:that.data.projectId}).then(function(res){
              
                    if(res.data.code == 200){
                        that.dialogshow()
                        // that.hide()
                        that.$message.success('创建推广成功')
                        // that.$router.push({path:"/myextensionshare",query:{id:res.data.datas}})
                        // that.countdown=common.getTimer(that.data.endTime) 
                    }
              })
          },
        // 我的推广详情
          getChannelsId:function(){
            let that=this
             let id=that.$route.query.id
              commonService.getChannelsId(that.data.channelId).then(function(res){
                    if(res.data.code == 200){
                        that.list=res.data.datas
                        // that.ettime=that.data.demandEndTime - that.data.demandStartTime
                         that.copytext=that.articlesurl + that.list.url
                         that.list.pv=Number(that.list.pv) 
                         that.list.demandPv=Number(that.list.demandPv)
                         if(that.list.demandPv <= that.list.pv){

                                that.tim=100
                         }else{
                          that.tim= Number((that.list.pv / that.list.demandPv * 100).toFixed(0))

                         }
                          that.getQRCode(that.copytext)

                         // if(that.data.pv==null){
                         //      that.data.pv=0
                         // }
                        // that.countdown=common.getTimer(that.data.endTime) 
                    }
              })

          },
        // 下载二维码
      downloadImg () {
          let that = this;
          //let canvas = document.getElementById('canvas').childNodes[0];
          let canvas = document.getElementById('canvas');
          let MIME_TYPE = 'image/png';
          let dlLink = document.createElement('a');
          dlLink.download = 'qrcode.png';
          dlLink.href = canvas.toDataURL('image/png');
          dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.href].join(':');
          document.body.appendChild(dlLink);
          dlLink.click();
          document.body.removeChild(dlLink);
      },
      // 复制链接
      copyUrl () {
          let that = this;
          let obj = document.getElementById('botIpt');
          obj.select();
          document.execCommand("Copy");
          that.$message({
              message: '复制成功！',
              type: 'success'
          });
      }
    },
  }
</script>
<style lang="less">
    .mytuig{
       padding: 15px;
      .searchIpt {
        width: 250px;
      }
      .opr{
        margin-bottom: 20px;
      }
      .has-gutter{
        background: #909399;
      }
      .el-table th{
        background: #eee;
      }
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
      .el-dialog__body{
          padding: 10px 20px 30px;
      }
      .xm-item{
        line-height: 1.8;
        font-family: Menlo,Monaco,Consolas,Courier,monospace;
        font-size: 12px;
        padding: 18px 24px;
        background-color: #fff;
        border-radius: 4px;
        -webkit-font-smoothing: auto;
        display:flex;justify-content: space-between;align-items: flex-start;
        .p.tit{min-height: 30px;line-height: 30px;font-size: 16px;color: #333;
            display:flex; justify-content: flex-start; align-items: center;
        .line{display:block;height: 14px;border-left:2px solid #f29700;float:left;margin-right: 8px;}
        }
        .p.subTit{font-size: 16px;color: #333;font-weight: bold;}
        .p.des{min-height: 25px;font-size: 14px;color:#666;}
        .p.info{font-size: 12px; color:#999;}
        .left{ width: 95%; 
          .v_progress{
             margin-top: 15px;
           }
           .v_des{
             margin-top: 15px;
           }
         }
        .right{ width: 5%; display:flex;justify-content: space-around;align-items: flex-start;
        i:hover{color:#f29700;cursor: pointer;}

        }
        .blueZone{margin-top: 20px;width: 600px;height: 48px;line-height: 48px;font-size: 14px;text-align:center;color: #20A0FF;background: #E8F5FF;}
         #botIpt{
            // width: 200px;
         }
    .qrCodeZone{
      margin: 20px 0;
      display: flex;justify-content: flex-start; align-items: center;
    .canvas-right{margin-left: 20px;}
    .canvas{width:116px;height: 116px; display: flex;justify-content: center; align-items: center;}
  }
    }
    .el-dialog__wrapper{
       background: rgba(0, 0, 0, 0.3) !important;
       .el-dialog{
           width: 640px;
           max-height: 80%;
           overflow-y:auto; 
           margin: 0 auto;
       }
    }
     .el-button--text{
      color: #f29700;
    }
    .el-progress-bar__inner{
       background-color: #f39700;
    }
    }
  .price{width: 100%;white-space: nowrap; text-overflow:ellipsis; overflow:hidden;}
</style>